<!DOCTYPE html>
<html lang="en">

<head>
    <title>荣誉榜单</title>
    <#include "/toupiao/components/meta.html" />
    <#include "/toupiao/components/stylesheets.html" />
    <link rel="stylesheet" href="/toupiao/stylesheets/rank.css">
</head>

<body>
    <div id="app">
        <#assign scrollingText = activity.notification! />
        <#include "/toupiao/components/scrolling.html" />
        <div class="remainingTime">
            <div class="title">
                <span>投票通道关闭倒计时</span>
            </div>
            <div class="counter">
                <div id="day-counter"></div>
                <div id="hour-counter"></div>
                <div id="min-counter"></div>
                <div id="sec-counter"></div>
            </div>
        </div>
        <div class="ranking-list">
            <ul class="am-list">
                <#list items as item>
                    <li>
                        <a href="/toupiao/info/${item.code!}">
                            <div class="am-g">
                                <div class="am-u-sm-2">
                                    <div class="cover-background">
                                        <#if item?index < 3>
                                        <img src="/toupiao/assets/img/crown.jpg" />
                                        </#if>
                                    </div>
                                    <div class="cover fillimg">
                                        <img src="${item.cover!}" />
                                    </div>
                                </div>
                                <div class="am-u-sm-10">
                                    <div class="title">${item.no!}号&nbsp;${item.title!}</div>
                                    <div class="votes">荣获：<span>${item.vote!}</span>&nbsp;票</div>
                                    <div class="ranking">第 ${item.position!} 名</div>
                                </div>
                            </div>
                        </a>
                    </li>
                </#list>
            </ul>
        </div>
        <div class="bottom-copyright">
            <a href="http://www.zhen-yee.com/">此网站由 蓁奕互联网科技有限公司 开发</a>
        </div>
        <#assign select = 3>
        <#include "/toupiao/components/footer.html" />
    </div>
    <#include "/toupiao/components/scripts.html" />
    <#include "/toupiao/components/wxConfig.html" />
    <script src="https://cdn.bootcss.com/layer/3.1.0/layer.js"></script>
    <script src="https://cdn.bootcss.com/jquery.countdown/2.2.0/jquery.countdown.js"></script>
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
        },
        methods: {
        }
    })
    wx.ready(function() {
        var title = "${activity.shareTitle!}";
        var desc = "${activity.shareDesc!}";
        var link = "${host}/toupiao/rank/${(activity.code)!}";
        var imgUrl = "${activity.shareImage!}";
        initWXShareAll(title, desc, link, imgUrl);
    });
    </script>
    <script>
    $(document).ready(function() {
        $('.ranking-list .cover').each(function() {
            $(this).height($(this).width());
        })
        if ("${isExpired!}" == "1") {
            layer.open({
                content: '活动已结束',
                btn: '确定'
            });
        }
    })
    </script>
    <script>
    var endTime = "${endTime!}";
    $("#day-counter")
        .countdown(endTime, function(event) {
            $(this).text(
                event.strftime('%D 天')
            );
        });
    $("#hour-counter")
        .countdown(endTime, function(event) {
            $(this).text(
                event.strftime('%H 时')
            );
        });
    $("#min-counter")
        .countdown(endTime, function(event) {
            $(this).text(
                event.strftime('%M 分')
            );
        });
    $("#sec-counter")
        .countdown(endTime, function(event) {
            $(this).text(
                event.strftime('%S 秒')
            );
        });
    </script>
</body>

</html>